<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="修改msg" @click="msg='No'">
        <h3 id="h3">{{ msg }}</h3>
    </div>
</body>
<script>
    var vm=new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show:function() {
          console.log('执行了show方法')
        }
      },
      /*在实例创建前会被调用
      beforeCreate(){
        console.log("--------beforeCreate------------");
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("msg:"+this.msg);
        this.show();
      },
      */
      /*
      created(){
        console.log("--------created------------");
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("msg:"+this.msg);
        this.show();
      },
      */
     /*
      beforeMount() {
        console.log("--------beforeMount------------");
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("msg:"+this.msg);
        this.show();
        console.log(document.getElementById("h3").innerHTML);
      },
      
      mounted() {
        console.log("--------mounted------------");
        console.log("el:"+this.$el);
        console.log("data:"+this.$data);
        console.log("msg:"+this.msg);
        this.show();
        console.log(document.getElementById("h3").innerHTML);
      },
      */
      /*
      beforeUpdate() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) 
      },
      */
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) 
      },

    });
</script>
</html>